/* =============== 排班日历 - 简约现代设计系统 =============== */

:root {
  /* 🎨 排班日历色彩系统 - 基于项目主色调 #409eff */
  --schedule-primary: #409eff;
  --schedule-primary-hover: #66b1ff;
  --schedule-primary-active: #337ecc;
  --schedule-primary-light: #ecf5ff;
  --schedule-primary-lighter: #b3d8ff;

  /* 功能色彩 */
  --schedule-success: #67c23a;
  --schedule-success-light: #95d475;
  --schedule-success-lighter: #f0f9eb;

  --schedule-warning: #e6a23c;
  --schedule-warning-light: #ebb563;
  --schedule-warning-lighter: #fdf6ec;

  --schedule-danger: #f56c6c;
  --schedule-danger-light: #f78989;
  --schedule-danger-lighter: #fef0f0;

  /* 中性色系统 - 与项目主题保持一致 */
  --schedule-text-primary: #303133;
  --schedule-text-regular: #606266;
  --schedule-text-secondary: #909399;
  --schedule-text-placeholder: #c0c4cc;
  --schedule-text-white: #ffffff;

  /* 背景色系统 */
  --schedule-bg-main: #ffffff;
  --schedule-bg-body: #f5f7fa;
  --schedule-bg-light: #fafbfc;
  --schedule-bg-secondary: #f8f9fa;
  --schedule-bg-hover: #f5f7fa;
  --schedule-bg-selected: #ecf5ff;

  /* 边框色系统 */
  --schedule-border-base: #dcdfe6;
  --schedule-border-light: #e4e7ed;
  --schedule-border-lighter: #ebeef5;
  --schedule-border-extra-light: #f2f6fc;

  /* 阴影系统 */
  --schedule-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.04);
  --schedule-shadow-base: 0 2px 12px rgba(0, 0, 0, 0.08);
  --schedule-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.12);
  --schedule-shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* 间距系统 - 紧凑简约 */
  --schedule-space-xs: 4px;
  --schedule-space-sm: 8px;
  --schedule-space-md: 12px;
  --schedule-space-lg: 16px;
  --schedule-space-xl: 20px;
  --schedule-space-xxl: 24px;

  /* 圆角系统 */
  --schedule-radius-sm: 4px;
  --schedule-radius-md: 6px;
  --schedule-radius-lg: 8px;
  --schedule-radius-xl: 12px;

  /* 动画系统 */
  --schedule-transition-base: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --schedule-transition-fast: all 0.15s ease-out;
  --schedule-transition-slow: all 0.3s ease-in-out;
}

/* 暗色模式适配 */
[data-theme='dark'] {
  --schedule-text-primary: #e5e6eb;
  --schedule-text-regular: #a8abb2;
  --schedule-text-secondary: #6c7293;
  --schedule-text-placeholder: #4e5969;

  --schedule-bg-main: #1e1e28;
  --schedule-bg-body: #17171e;
  --schedule-bg-light: #232329;
  --schedule-bg-secondary: #2a2a32;
  --schedule-bg-hover: #2f2f38;
  --schedule-bg-selected: rgba(64, 158, 255, 0.12);

  --schedule-border-base: #3c3c44;
  --schedule-border-light: #333338;
  --schedule-border-lighter: #2a2a2e;
  --schedule-border-extra-light: #25252a;

  --schedule-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.2);
  --schedule-shadow-base: 0 2px 12px rgba(0, 0, 0, 0.3);
  --schedule-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.4);
  --schedule-shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* =============== 排班日历主容器 =============== */
.schedule-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--schedule-bg-body);
  border-radius: var(--schedule-radius-lg);
  overflow: hidden;
  box-shadow: var(--schedule-shadow-base);

  /* =============== 顶部头部栏 =============== */
  .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--schedule-space-lg) var(--schedule-space-xl);
    background: var(--schedule-bg-main);
    border-bottom: 1px solid var(--schedule-border-lighter);
    min-height: 64px;

    .header-left {
      display: flex;
      align-items: center;
      gap: var(--schedule-space-xl);

      .month-display {
        display: flex;
        align-items: center;
        gap: var(--schedule-space-lg);

        .month-info {
          .current-month {
            font-size: 24px;
            font-weight: 600;
            color: var(--schedule-text-primary);
            margin: 0 0 var(--schedule-space-xs) 0;
            line-height: 1.2;
          }

          .today-info {
            display: flex;
            align-items: center;
            gap: var(--schedule-space-xs);
            font-size: 13px;

            .today-label {
              color: var(--schedule-text-secondary);
              font-weight: 500;
            }

            .today-date {
              color: var(--schedule-primary);
              font-weight: 600;
              background: var(--schedule-primary-light);
              padding: 2px var(--schedule-space-sm);
              border-radius: var(--schedule-radius-sm);
            }
          }
        }

        .nav-controls {
          display: flex;
          gap: var(--schedule-space-xs);

          .nav-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--schedule-border-light);
            background: var(--schedule-bg-main);
            border-radius: var(--schedule-radius-md);
            cursor: pointer;
            transition: var(--schedule-transition-base);
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background: var(--schedule-bg-hover);
              border-color: var(--schedule-primary);
              color: var(--schedule-primary);
              transform: translateY(-1px);
              box-shadow: var(--schedule-shadow-light);
            }

            .nav-text {
              font-size: 18px;
              font-weight: 600;
              color: var(--schedule-text-regular);
              transition: var(--schedule-transition-base);
            }

            &:hover .nav-text {
              color: var(--schedule-primary);
            }
          }
        }
      }
    }

    .header-right {
      .action-buttons {
        display: flex;
        gap: var(--schedule-space-sm);

        .action-btn {
          padding: var(--schedule-space-sm) var(--schedule-space-lg);
          background: var(--schedule-bg-main);
          border: 1px solid var(--schedule-border-light);
          border-radius: var(--schedule-radius-md);
          color: var(--schedule-text-regular);
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: var(--schedule-transition-base);
          display: flex;
          align-items: center;
          gap: var(--schedule-space-xs);
          min-height: 36px;

          &:hover {
            background: var(--schedule-bg-hover);
            border-color: var(--schedule-primary);
            color: var(--schedule-primary);
            transform: translateY(-1px);
            box-shadow: var(--schedule-shadow-light);
          }

          &.active {
            background: var(--schedule-primary);
            border-color: var(--schedule-primary);
            color: var(--schedule-text-white);
            box-shadow: var(--schedule-shadow-medium);

            &:hover {
              background: var(--schedule-primary-hover);
              transform: translateY(-1px);
            }
          }
        }
      }
    }
  }

  /* =============== 日历主体区域 =============== */
  .calendar-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--schedule-bg-main);

    /* 日期头部行 */
    .calendar-header-row {
      display: flex;
      background: var(--schedule-bg-light);
      border-bottom: 1px solid var(--schedule-border-lighter);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: var(--schedule-shadow-light);

      .employee-header-fixed {
        width: 240px;
        min-width: 240px;
        padding: var(--schedule-space-lg);
        background: var(--schedule-bg-light);
        border-right: 1px solid var(--schedule-border-lighter);
        display: flex;
        align-items: center;
        position: sticky;
        left: 0;
        z-index: 101;

        .header-text {
          font-size: 15px;
          font-weight: 600;
          color: var(--schedule-text-primary);
        }
      }

      .dates-header-container {
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }

        .dates-header {
          display: flex;
          min-width: fit-content;

          .date-cell {
            min-width: 100px;
            width: 100px;
            padding: var(--schedule-space-md) var(--schedule-space-sm);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            border-right: 1px solid var(--schedule-border-lighter);
            background: var(--schedule-bg-light);
            transition: var(--schedule-transition-base);

            .date-number {
              font-size: 16px;
              font-weight: 700;
              color: var(--schedule-text-primary);
              line-height: 1;
            }

            .date-weekday {
              font-size: 11px;
              font-weight: 500;
              color: var(--schedule-text-secondary);
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }

            /* 周末样式 */
            &.is-weekend {
              background: linear-gradient(135deg, #fff1f0 0%, #ffebe8 100%);

              .date-number {
                color: var(--schedule-danger);
              }

              .date-weekday {
                color: var(--schedule-danger-light);
              }
            }

            /* 今天样式 */
            &.is-today {
              background: var(--schedule-primary);
              color: var(--schedule-text-white);
              position: relative;

              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
              }

              .date-number,
              .date-weekday {
                color: var(--schedule-text-white);
                position: relative;
                z-index: 1;
              }
            }

            /* 非当前月份 */
            &:not(.is-current-month) {
              opacity: 0.5;

              .date-number,
              .date-weekday {
                color: var(--schedule-text-placeholder);
              }
            }
          }
        }
      }
    }

    /* =============== 排班容器 =============== */
    .schedule-container {
      flex: 1;
      display: flex;
      overflow: hidden;

      /* 员工列表固定区域 */
      .employees-list-fixed {
        width: 240px;
        min-width: 240px;
        background: var(--schedule-bg-main);
        border-right: 1px solid var(--schedule-border-lighter);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 90;
        max-height: 100%;
        position: relative;

        /* 自定义滚动条 */
        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-track {
          background: var(--schedule-bg-secondary);
        }

        &::-webkit-scrollbar-thumb {
          background: var(--schedule-border-base);
          border-radius: 2px;

          &:hover {
            background: var(--schedule-text-placeholder);
          }
        }

        .employee-card-fixed {
          min-height: 64px;
          padding: var(--schedule-space-md) var(--schedule-space-lg);
          background: var(--schedule-bg-main);
          border-bottom: 1px solid var(--schedule-border-extra-light);
          display: flex;
          align-items: center;
          gap: var(--schedule-space-md);
          transition: var(--schedule-transition-base);

          &:hover {
            background: var(--schedule-bg-hover);
          }

          .employee-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--schedule-primary) 0%, var(--schedule-primary-hover) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--schedule-text-white);
            font-weight: 600;
            font-size: 12px;
            box-shadow: var(--schedule-shadow-light);
            flex-shrink: 0;

            .avatar-placeholder {
              line-height: 1;
            }
          }

          .employee-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;

            .employee-name {
              font-size: 14px;
              font-weight: 600;
              color: var(--schedule-text-primary);
              line-height: 1.3;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .employee-code {
              font-size: 12px;
              color: var(--schedule-text-secondary);
              background: var(--schedule-bg-secondary);
              padding: 1px var(--schedule-space-xs);
              border-radius: var(--schedule-radius-sm);
              width: fit-content;
              font-weight: 500;
              max-width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .employee-stats {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
            flex-shrink: 0;

            .stat-item {
              display: flex;
              align-items: center;
              gap: var(--schedule-space-xs);
              font-size: 12px;

              .stat-label {
                color: var(--schedule-text-placeholder);
                font-weight: 500;
              }

              .stat-value {
                color: var(--schedule-primary);
                font-weight: 600;
                background: var(--schedule-primary-light);
                padding: 1px var(--schedule-space-xs);
                border-radius: var(--schedule-radius-sm);
                min-width: 20px;
                text-align: center;
              }
            }
          }
        }
      }

      /* 排班网格滚动区域 */
      .schedule-grid-scrollable {
        flex: 1;
        overflow: auto;
        max-height: 100%;
        position: relative;

        /* 自定义滚动条 */
        &::-webkit-scrollbar {
          width: 4px;
          height: 4px;
        }

        &::-webkit-scrollbar-track {
          background: var(--schedule-bg-secondary);
        }

        &::-webkit-scrollbar-thumb {
          background: var(--schedule-border-base);
          border-radius: 2px;

          &:hover {
            background: var(--schedule-text-placeholder);
          }
        }

        /* 排班行 */
        .schedule-row {
          display: flex;
          min-height: 64px;
          border-bottom: 1px solid var(--schedule-border-extra-light);
          transition: var(--schedule-transition-base);

          &:hover {
            background: var(--schedule-bg-hover);
          }

          &.is-selected {
            background: var(--schedule-bg-selected);
            border-color: var(--schedule-primary-lighter);
          }

          /* 排班插槽 */
          .schedule-slot {
            min-width: 100px;
            width: 100px;
            min-height: 64px;
            background: var(--schedule-bg-main);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--schedule-transition-base);
            position: relative;
            border-right: 1px solid var(--schedule-border-extra-light);
            padding: var(--schedule-space-xs);

            &:hover {
              background: var(--schedule-bg-hover);
            }

            /* 周末样式 */
            &.is-weekend {
              background: #fff9f9;
            }

            /* 选中状态 */
            &.is-selected {
              background: var(--schedule-bg-selected);
              border-color: var(--schedule-primary-lighter);
            }

            /* 有排班的插槽 */
            &.has-shift {
              background: var(--schedule-success-lighter);

              &:hover {
                background: rgba(103, 194, 58, 0.15);
              }
            }

            /* 插槽内容 */
            .slot-content {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              position: relative;
            }

            /* 班次显示 */
            .shift-display {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 2px;
              width: 100%;
              padding: var(--schedule-space-xs);
              border-radius: var(--schedule-radius-md);
              background: var(--schedule-success);
              color: var(--schedule-text-white);
              box-shadow: var(--schedule-shadow-light);
              transition: var(--schedule-transition-base);
              cursor: pointer;

              &:hover {
                background: var(--schedule-success-light);
                transform: translateY(-1px);
                box-shadow: var(--schedule-shadow-medium);
              }

              .shift-name {
                font-size: 12px;
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
              }

              .shift-time {
                font-size: 10px;
                opacity: 0.9;
                white-space: nowrap;
              }
            }

            /* 空插槽 */
            .empty-slot {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              border: 1px dashed var(--schedule-border-light);
              border-radius: var(--schedule-radius-md);
              background: var(--schedule-bg-light);
              transition: var(--schedule-transition-base);
              cursor: pointer;

              &:hover {
                border-color: var(--schedule-primary);
                background: var(--schedule-primary-light);
              }

              .empty-text {
                font-size: 11px;
                color: var(--schedule-text-placeholder);
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }

  /* =============== 批量操作模式 =============== */
  &.batch-mode-active {
    .schedule-slot {
      cursor: crosshair;

      &:hover {
        background: var(--schedule-bg-selected);
        border-color: var(--schedule-primary);
      }
    }

    .schedule-row {
      &:hover {
        background: var(--schedule-bg-hover);
      }
    }

    .empty-slot {
      &:hover {
        border-color: var(--schedule-primary);
        background: var(--schedule-primary-light);
      }
    }
  }

  /* =============== 响应式设计 =============== */
  @media (max-width: 1200px) {
    .calendar-header {
      padding: var(--schedule-space-md) var(--schedule-space-lg);

      .header-left .month-display {
        gap: var(--schedule-space-md);

        .month-info .current-month {
          font-size: 20px;
        }
      }

      .header-right .action-buttons .action-btn {
        padding: var(--schedule-space-xs) var(--schedule-space-md);
        font-size: 13px;
      }
    }

    .employee-header-fixed,
    .employees-list-fixed {
      width: 200px;
      min-width: 200px;
    }

    .date-cell,
    .schedule-slot {
      min-width: 80px;
      width: 80px;
    }
  }

  @media (max-width: 768px) {
    .calendar-header {
      flex-direction: column;
      gap: var(--schedule-space-md);
      align-items: stretch;

      .header-left,
      .header-right {
        justify-content: center;
      }
    }

    .employee-header-fixed,
    .employees-list-fixed {
      width: 160px;
      min-width: 160px;
    }

    .date-cell,
    .schedule-slot {
      min-width: 60px;
      width: 60px;
    }

    .employee-card-fixed {
      padding: var(--schedule-space-sm);

      .employee-info .employee-name {
        font-size: 13px;
      }
    }
  }
}

/* =============== 特殊状态和动画 =============== */

/* 加载状态 */
.schedule-calendar.loading {
  .calendar-main {
    opacity: 0.7;
    pointer-events: none;
  }
}

/* 拖拽状态 */
.schedule-calendar.dragging {
  .schedule-slot {
    transition: none;
  }
}

/* 焦点状态 */
.schedule-slot:focus-visible {
  outline: 2px solid var(--schedule-primary);
  outline-offset: -2px;
  z-index: 1;
}

/* 选择框动画 */
@keyframes selectHighlight {
  0% {
    background: var(--schedule-bg-main);
  }

  50% {
    background: var(--schedule-primary-light);
  }

  100% {
    background: var(--schedule-bg-selected);
  }
}

.schedule-slot.selecting {
  animation: selectHighlight 0.3s ease-out;
}

/* 数据更新动画 */
@keyframes dataUpdate {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.schedule-slot.updating {
  animation: dataUpdate 0.5s ease-in-out;
}